<template>
	<view class="org-item ss-flex ss-col-top" v-if="(data?.data?.length || data?.id || data?.id == 0)" >
		<view class="org-item-title ss-flex" :style="{color:titleColor,background:titleBGColor}">
			{{title}}
		</view>
		<view class="org-item-content ss-flex-1">
			<view class="parent ss-p-l-10 ss-m-l-20" v-if="parent">
				<view class="parentBox ss-flex">
					<image class="parent-logo ss-m-r-10" :src="sheep.$url.cdn('/static/icon/ptlogo.png')"  />
					<view class="parent-title ss-line-1">{{data.nickname}}</view>
				</view>
				<view class="parent-label ss-m-t-12" v-if="data?.id == 0">{{data.label}}</view>
			</view>
			<view class="userGroup ss-flex ss-flex-wrap" v-else>
				<view class="userGroup-numBox ss-flex">
					<view class="numBox-direct">Z({{data.direct_count||0}})人</view>
					<view class="numBox-noDirect">J({{data.indirect_count||0}})人</view>
					<view class="numBox-all">总：({{data.total_count||0}})人</view>
				</view>
				<view class="userGroup-item ss-flex-col ss-col-center" v-for="item in list">
					<view class="item-avatarBox" @click="btnClick(item)">
						<image class="item-avatar" :src="sheep.$url.cdn(item.avatar)"  />
						<view  :class="item.is_direct?'direct':'indirect'">
							{{item.is_direct?'Z':'J'}}</view>
					</view>
					<view class="item-nickname ss-line-1">{{item.nickname}}</view>
				</view>
				<view class="userGroup-item ss-flex-col ss-col-center" @click="more"
					v-if="data.last_page > 0 && data.last_page!==data.current_page" >
					<view class="item-avatarBox">
						<view class="item-avatar ss-flex ss-row-center">
							<uni-icons type="more-filled" size="24" />
						</view>
					</view>
					<view class="item-nickname">更多</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { reactive, onMounted,computed, onBeforeUnmount,watch } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import { cloneDeep } from 'lodash';
	const emit = defineEmits(['set','get'])
	const props = defineProps({
		title:{
			type:String,
			default:'我的下级'
		},
		titleColor:{
			type:String,
			default:'#2C2C2C'
		},
		titleBGColor:{
			type:String,
			default:'#E3E3E3'
		},
		parent:{
			type:Boolean,
			default:false
		},
		data:{
			type:[Object,Array],
			default:()=>({})
		}
	})
	const list = computed(()=>{
		if(props.data.total == props.data.data.length){
			return props.data.data
		}else{
			return props.data.data.slice(0,-1)
		}
	})
	const state = reactive({
		num:{
			direct:0,
			noDirect:0,
			all:0,
		},
		pages:0,
		maxPage:0,
	})
	// const list = computed(()=>{
	// 	if(props.data.length){
	// 		return props.data.slice(0,state.pages*14)
	// 	}else{
	// 		return []
	// 	}
	// })
	// watch(()=>props.data,(newVal)=>{
	// 	if(newVal.length){
	// 		state.pages = 1
	// 		state.maxPage = newVal.length >14 ? Math.ceil(newVal.length/14) : 1
	// 		let direct = newVal.reduce((num,item)=>(item.is_direct ? num+1 : num),0)
	// 		state.num = {
	// 			direct:direct,
	// 			noDirect:newVal.length - direct,
	// 			all:newVal.length,
	// 		}
	// 	}else{
	// 		state.pages= 1
	// 		state.maxPage= 0
	// 	}
	// },{
	// 	immediate:true
	// })
	onMounted(()=>{
	})
	function more(){
		emit('get')
	}
	function btnClick(item){
		if(props.parent==false){
			emit('set',{data:item})
		}
		
		// sheep.$router.go('/pages/index/index')
	}
	
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.org-item{
		width: 730rpx;
		min-height:210rpx;
		margin:20rpx 10rpx 0;
		border-radius: 20rpx;
		padding:20rpx 0rpx 20rpx 40rpx;
		background: #F4F4F4;
	}
	.org-item-title{
		width: 34rpx;
		min-width: 34rpx;
		min-height: 150rpx;
		padding: 20rpx 0;
		border-radius: 6rpx;
		background: #E3E3E3;
		font-family: Source Han Sans;
		font-size: 22rpx;
		font-weight: normal;
		line-height: 118.45%;
		text-align: center;
		letter-spacing: normal;
		color: #2C2C2C;
	}
	.org-item-content{
		.parent{
			.parent-logo{
				width: 68rpx;
				height: 68rpx;
				border-radius: 40rpx;
			}
			.parent-title{
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 500;
				line-height: normal;
				letter-spacing: normal;
				color: #000000;
			}
			.parent-label{
				font-family: Source Han Sans;
				font-size: 26rpx;
				font-weight: 500;
				line-height: normal;
				letter-spacing: normal;
				color: #686868;
			}
		}
		.userGroup{
			.userGroup-numBox{
				width: 100%;
				.numBox-direct,
				.numBox-noDirect,
				.numBox-all{
					height:38rpx;
					padding: 0 16rpx;
					border-radius: 4rpx;
					font-family: Source Han Sans;
					font-size: 26rpx;
					font-weight: 500;
					text-align: center;
					letter-spacing: normal;
					color: #FFFFFF;
					margin-left: 20rpx;
				}
				.numBox-direct{
					background: #555CEA;
				}
				.numBox-noDirect{
					background: #FD4B83;
				}
				.numBox-all{
					background: #3D3D3D;
				}
			}
			.userGroup-item{
				margin: 15rpx 0 0;
				width: 130rpx;
				height: 120rpx;
				.item-avatarBox{
					position: relative;
					.item-avatar{
						box-sizing: content-box;
						background: rgba(216, 216, 216, 0);
						border: 4rpx solid #FFFFFF;
						box-shadow: 0rpx 0rpx 10rpx 0rpx #363636;
						width: 68rpx;
						height: 68rpx;
						border-radius: 40rpx;
					}
					.direct,
					.indirect{
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 62rpx;
						height: 22rpx;
						border-radius: 4rpx;
						font-family: Source Han Sans;
						font-size: 18rpx;
						font-weight: 500;
						line-height: 22rpx;
						text-align: center;
						letter-spacing: normal;
						color: #E6E6E6;
					}
					.direct{
						background: #555CEA;
					}
					.indirect{
						background: #FD4B83;
					}
				}
				.item-nickname{
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: 500;
					height: 41rpx;
					text-align: center;
					letter-spacing: normal;
					color: #0A0A0A;
				}
			}
		}
	}
</style>